<template>
  <div class="right-neighbor">
    <!-- 智能辅助运输 -->
    <data-box
      :bg="box_header"
      he="3.0625rem"
      wd="29.375rem"
      class="assist-transport"
      title="智能辅助运输"
    >
      <template slot="content">
        <div class="content-top" style="margin-top: 0.7188rem">
          <SubTitle
            title="当月井下车辆统计"
            wd="100%"
            he="1.5rem"
            :num="[22]"
            unit="辆"
            theme-one="#00F6F8"
          />
          <div class="chart-box">
            <JadeChart
              class="chart"
              style="height: 9.1056rem"
              :data="JadeJueChartData"
              :color="JadeJueChartOption.color"
              :text="JadeJueChartOption.text"
              :showLegend="false"
            />
            <Legend
              style="margin-top: 2.5rem; height: 5.75rem"
              class="legend"
              shape="dot"
              wd="0.5rem"
              he="0.5rem"
              unit=""
              itemWidth="10.75rem"
              itemHeight="1.5rem"
              :legend="legend"
            />
          </div>
        </div>
        <div class="content-bottom" style="margin-top: 1.7694rem">
          <SubTitle
            title="近7天车辆运行效率趋势"
            wd="100%"
            he="1.5rem"
            :num="[95]"
            unit="%"
            theme-one="#00F6F8"
          />
          <LineChart
            style="height: 9.75rem; margin-top: 0.9375rem"
            class="chart"
            :chart-data="chartTimeData"
            :area="lineChartOption.area"
            :unit="lineChartOption.unit"
            :color="lineChartOption.color"
            :text="['智能辅助运输']"
          />
        </div>
      </template>
    </data-box>

    <!-- 智能防冲 -->
    <data-box
      :bg="box_header"
      he="3.0625rem"
      style="margin-top: 1.6563rem"
      wd="29.375rem"
      class="anti-scour-box"
      title="智能防冲"
    >
      <template slot="content">
        <div class="content-top">
          <div
            class="anti-scour-item"
            v-for="(item, index) in antiScourList"
            :key="index"
          >
            <img class="icon" :src="item.icon" alt="" />
            <div class="middle">
              <span class="title">{{ item.title }}</span>
              <img class="arrow" :src="item.arrow" alt="" />
            </div>
            <div
              :class="
                item.status == 0 ? 'anti-scour-default' : 'anti-scour-active'
              "
            >
              {{ item.status == 0 ? "异常" : "正常" }}
            </div>
          </div>
        </div>
        <div class="content-bottom" style="margin-top: 2.625rem">
          <SubTitle
            title="当前应力最大/最小"
            wd="100%"
            he="1.5rem"
            :num="[6]"
            unit="MPa"
            theme-one="#00F6F8"
          />
          <BarChart
            :barWidth="8"
            style="height: 9.75rem; margin-top: 0.9375rem"
            class="chart"
            :data="chartTimeData"
            :area="powerChartOption.area"
            :unit="powerChartOption.unit"
            :color="powerChartOption.color"
            text="智能辅助运输"
          />
        </div>
      </template>
    </data-box>
  </div>
</template>

<script>
import DataBox from '../lib/dataBox.vue';
import SubTitle from '../lib/subTitle.vue';
import JadeChart from '@/components/chart/cockpit/JadeChart.vue';
import LineChart from '@/components/chart/cockpit/LineChart';
import BarChart from '@/components/chart/cockpit/BarChart.vue';
import Legend from '@/components/chart/cockpit/Legend.vue';

export default {
  name: 'DafosiControlWebRightNeighbor',
  components: { DataBox, SubTitle, JadeChart, LineChart, BarChart, Legend },

  data() {
    return {
      box_header: require('../../../assets/img/decisionAnalysis/box_header.png'),
      powerChartOption: {
        color: ['#00FDFF'],
        area: true,
        unit: 'MPa'
      },
      lineChartOption: {
        color: ['#00FDFF'],
        area: true,
        unit: '%'
      },
      chartTimeData: [
        { x: '12-01', y: 75, s: '运行时长' },
        { x: '12-06', y: 30, s: '运行时长' },
        { x: '12-11', y: 60, s: '运行时长' },
        { x: '12-16', y: 37, s: '运行时长' },
        { x: '12-21', y: 79, s: '运行时长' },
        { x: '12-26', y: 42, s: '运行时长' },
        { x: '12-31', y: 67, s: '运行时长' }
      ],
      JadeJueChartData: [
        { type: '人车', value: 4 },
        { type: '工程车', value: 8 },
        { type: 'BDT', value: 10 }
      ],
      JadeJueChartOption: {
        color: ['#00fdff', '#1662ff', '#a2b9fd'],
        text: `车辆\n类型`
      },
      legend: [
        {
          name: '人车',
          value: 4,
          color: '#00fdff'
        },
        {
          name: '工程车',
          value: 8,
          color: '#1662ff'
        },
        {
          name: 'BDT',
          value: 10,
          color: '#a2b9fd'
        }
      ],
      antiScourList: [
        {
          icon: require('../../../assets/img/decisionAnalysis/anti_scour_icon.png'),
          arrow: require('../../../assets/img/decisionAnalysis/anti_scour_arrow.png'),
          title: '微震监测',
          status: 0
        },
        {
          icon: require('../../../assets/img/decisionAnalysis/anti_scour_icon.png'),
          arrow: require('../../../assets/img/decisionAnalysis/anti_scour_arrow.png'),
          title: '应力监测',
          status: 1
        }
      ]
    };
  },

  mounted() {},

  methods: {}
};
</script>

<style lang="scss" scoped>
// 智能辅助运输
.assist-transport {
  .content-top {
    .chart-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .chart {
        width: 13.0394rem;
      }
      .legend {
        flex: 1;
        height: 100%;
        overflow-y: auto;
        width: 11.4375rem;
        margin-right: 2.1975rem;
      }
    }
  }
}
// 智能防冲
.anti-scour-box {
  .content-top {
    .anti-scour-item {
      display: flex;
      align-items: center;
      .icon {
        width: 3.875rem;
        // margin-top: -0.3125rem;
      }
      .middle {
        display: flex;
        align-items: center;
        margin: 0rem 1.75rem 0rem 2.3125rem;
        .title {
          height: 0.875rem;
          font-size: 0.875rem;
          line-height: 1;
          font-family: Adobe Heiti Std, Adobe Heiti Std-R;
          letter-spacing: 0.0656rem;
        }
        .arrow {
          width: 10.9375rem;
        }
      }
      .anti-scour-default,
      .anti-scour-active {
        height: 1.25rem;
        font-size: 1.25rem;
        line-height: 1;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 500;
        text-align: left;
        letter-spacing: 0.0938rem;
      }
      .anti-scour-active {
        color: #35ffc0;
      }
      .anti-scour-default {
        color: #a2a7ba;
      }
    }
    .anti-scour-item:first-child {
      margin-top: 1.1563rem;
    }
    .anti-scour-item:last-child {
      margin-top: 1.5rem;
    }
  }
}
</style>
